<template>
	<view class="">
		<!-- <view class="" style="width: 100vw;height: 4vh;"></view> -->
	
	<view class="" style="display: flex;">
		<view class="" >
			<!-- <leftmenuVue ></leftmenuVue> -->
		</view>
	<view>
		<!-- 列表盒子开始 -->
		<!-- hldsrc是动态的背景图片，包含的css类名有：bg -->
		<view class="zw" style="display: flex; flex-wrap:wrap;">

			<view class="" v-for="(test,index) in tests" :key="test.id">
				<view class="bg" style="" :style="{
				backgroundImage: `url(${test.pictureurl})`,   
				backgroundSize: 'cover'}" @click="toTestPage(test.url)">
					<view style="width: 65%; height: 100%; border-radius: 50px; background-color: rgba(0, 0, 0, 0.3);">
						<view class="" style="height: 6%;">

						</view>
						<view class="" style="margin-left: 10%; font-size: 50rpx; color: aliceblue;">
							{{test.testName}}
						</view>
						<view class=""
							style="width: 90%; height: 1px; background-color: aliceblue; margin-left: 5%; margin-right: 5%; margin-top: 5%; ">

						</view>
						<view class="xxms"
							style="margin-top: 10%;   margin-left: 5%; font-size: 40rpx; color: aliceblue;height: 60%; display: -webkit-box; -webkit-box-orient: vertical; overflow-y: auto; line-height: 50rpx; ">
							{{test.testInfo}}
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 列表盒子结束 -->
		<view>
		</view>
	</view>
	</view>
	</view>
</template>

<script>
	import leftmenuVue from '../../common/leftmenu.vue'
	import {
		getMentalTestList
	} from '@/api/mentalTest/testList';
	import {
		getCompletedMentalTestList
	} from '@/api/mentalTest/testList';
	export default {
		components: {
		   leftmenuVue
		 },
		data() {
			return {
				tests: [],
				finishList: [],
				testStatuList: [],
				finishTestsCount: 0, // 完成了几个测试
				count: 0,
				title: '职业规划测试',
				startTest: '开始测试',
				hldsrc: this.$baseURL + "/profile/upload/2025/05/27/hld_20250527101206A005.jpg"

			};
		},

		mounted() {
			this.testStatuList = []

			// 先查所有测试，在用
			getMentalTestList().then((res) => {
				this.tests = res.rows;
				for(let i=0;i<this.tests.length;i++){
					this.tests[i].pictureurl=this.$baseURL+this.tests[i].pictureurl
				}
				console.log("测试列表")
				console.log(this.tests)
			})



		},

		methods: {
			toTestPage(url) {

				uni.navigateTo({
					url:url
				});
			}
		}
	};
</script>

<style scoped>
	.bg {
		border-radius: 50px;
		box-shadow: -20px -20px 60px #bebebe,
			20px 20px 60px #ffffff;
		width: 33vw;height: 36vh;
		margin-top: 3vh;
		margin-bottom: 3vh;
		margin-left: 5vw;
		margin-right: 5vw;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;

	}

	* {
		margin: 0;
		padding: 0;
	}

	.text-area {
		width: 100%;
		height: 100%;
	}

	/deep/ .u-cell__title-text.data-v-913eaa32 {
		font-size: 35rpx !important;
	}
</style>